<!--
* author: zhanghuan
* created: 2018/1/12
* describe: 登录页面
-->
<template>
  <div class="login">
    <div class="login-main">
      <div class="login-form">
        <h3 class="login-title">登录</h3>
        <input
          v-model="userName"
          type="text"
          class="inpt username"
          placeholder="登录账号"
          @keyup.enter="clickLogin"
        />
        <input
          v-model="password"
          type="password"
          class="inpt"
          placeholder="密码"
          @keyup.enter="clickLogin"
        />
        <p class="code fix">
          <input
            v-model="code"
            type="text"
            class="inpt fl"
            placeholder="验证码"
            @keyup.enter="clickLogin"
          />
          <img
            :src="codeSrc"
            @click="getCode"
            class="fr"
          />
        </p>
        <p class="action-btns fix">
          <el-button
            class="btn fl"
            type="primary"
            @click="clickLogin"
          >登录</el-button>
          <el-button
            class="btn fr reset"
            type="info"
            @click="reset"
          >重置</el-button>
        </p>
        <!-- <a href="javascript:;" class="download-app">手机客户端软件下载</a> -->
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from '@/js/axios'
import URL from '@/url'
export default {
  name: "login",
  data() {
    return {
      userName: '',
      password: '',
      code: '',
      codeSrc: URL.getCode
    }
  },
  methods: {
    /*
    * params: 无
    * return: 无
    * function: 初始化方法
    * */
    init() {
      let userName = localStorage.getItem('userName')
      let token = sessionStorage.getItem('token')
      if (userName) {
        this.userName = userName
      }
      if (!token) {
        this.getToken()
      }
    },
    /*
    * params: 无
    * return: 无
    * function: 获取token
    * */
    getToken() {
      axios.ajax({
        url: URL.getToken,
        method: 'post',
        isShowLoading: true
      }).then(res => {
        sessionStorage.setItem('token', res)
      })
    },
    /*
    * params: 无
    * return: 无
    * function: 获取验证码
    * */
    getCode() {
      this.codeSrc = URL.getCode + '?_=' + new Date().getTime()
    },
    /*
    * params: 无
    * return: true/false
    * function: 验证方法
    * */
    validate() {
      let regUsername = /^.+$/
      let regPassword = /^.+$/
      let regCode = /^.+$/
      let username = this.userName.trim()
      let password = this.password.trim()
      let code = this.code.trim()
      if (!regUsername.test(username)) {
        this.$alert('请输入登录账号', '提示', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
        return false
      }
      if (!regPassword.test(password)) {
        this.$alert('请输入密码', '提示', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
        return false
      }
      if (!regCode.test(code)) {
        this.$alert('请输入验证码', '提示', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
        return false
      }
      return true
    },
    /*
    * params: 无
    * return: 无
    * function: 登录
    * */
    login() {
      let lastHref = sessionStorage.getItem('lastHref')
      let key = "86C63180C2806ED1F47B859DE501215B"
      //let password = window.SM4CryptECBWithPKCS7Padding(this.password, 1, key)
      axios.ajax({
        url: URL.login,
        method: 'get',
        isShowLoading: true,
        params: {
          userName: this.userName,
          password: this.password,
          kaptchaCode: this.code
        }
      }).then(res => {
        localStorage.setItem('userName', this.userName)
        localStorage.setItem('userRealname', res.userRealname)
        if (lastHref && lastHref.indexOf('#/login') < 0) {
          window.location.href = lastHref
        } else {
          this.$router.push('home')
        }
        sessionStorage.removeItem('lastHref')
      })
    },
    /*
    * params: 无
    * return: 无
    * function: 登录触发
    * */
    clickLogin() {
      if (!this.validate()) {
        return false
      }
      this.login()
    },
    /*
    * params: 无
    * return: 无
    * function: 重置
    * */
    reset() {
      this.userName = ''
      this.password = ''
      this.code = ''
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
@import "../../style/variables.scss";
.login {
  .login-main {
    position: relative;
    height: calc(100vh - 212px);
    background: url(../../assets/login-bg.png) no-repeat center top;
    background-size: 100% auto;
  }
  /* @media screen and (max-width: 1366px) {
    .login-main {
      background-size: auto 100%;
    }
  } */

  .login-form {
    position: absolute;
    top: 54px;
    right: 192px;
    width: 320px;
    height: 320px;
    padding: 10px 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);

    .login-title {
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      font-weight: 900;
      color: $mainC;
      margin-top: 2px;
      border-bottom: 1px solid $lineC;
    }
    .inpt {
      width: 100%;
      height: 38px;
      margin: 5px 0;
      padding: 0 6px;
      border: 1px solid $lineC;
      outline: none;
      &.username {
        margin-top: 24px;
      }
      &::placeholder {
        font-weight: 700;
        color: #7d7d7d;
      }
    }

    .code {
      input {
        width: 130px;
      }
      img {
        width: 140px;
        height: 38px;
        padding: 0;
        margin: 5px 0;
        cursor: pointer;
      }
    }

    .action-btns {
      margin: 34px 0 18px 0;
      .btn {
        padding: 11px 39px;
        border-radius: 8px;
      }
      .reset {
        margin-right: 10px;
      }
    }

    .download-app {
      font-size: 12px;
      color: $fontC;
      &:hover {
        color: $mainC;
      }
    }
  }
}
</style>
